<template>
  <div class="layout">
    <header class="layout-header">
      <div class="logo">
        <h3>[熙韩博客]管理系统</h3>
      </div>
      <div class="right">
        <div class="top">
          <span>用户名称</span>
          <el-button type="danger" plain size="mini">退出</el-button>
        </div>
        <div class="bottom">
          2025-10-13 16:05:05
        </div>
      </div>
    </header>
    <section class="layout-section">
      <aside class="aside">
        <div><router-link active-class="active" to='/home'>主页</router-link></div>
        <div><router-link active-class="active" to='/banner'>轮播图</router-link></div>
        <div>
          <span>导航管理</span>
          <ul>
            <li>
              <router-link active-class="active" to='/work_life'>工作生活</router-link>
              <router-link active-class="active" to='/skill_learn'>技能学习</router-link>
              <router-link active-class="active" to='/my_hobby'>兴趣爱好</router-link>
            </li>
          </ul>
        </div>
        <div>
          <span>文章管理</span>
          <ul>
            <li>
              <router-link active-class="active" to='/publish_article'>发布文章</router-link>
              <router-link active-class="active" to='/article_list'>文章列表</router-link>
            </li>
          </ul>
        </div>
      </aside>
      <main class="main">
        <!-- 右侧内容 -->
        <nav>
          <router-link to="/home">主页
            <i>×</i>
          </router-link>
        </nav>
        <router-view></router-view>
      </main>
    </section>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
@theme-color: #6681FF;

.layout {
  font-size: 16px;
  font-family: "微软雅黑";
  color: #000
}
span {
  font-weight: 600;
  font-size: 18px;
}

.layout-header {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  height: 80px;
  background-color: @theme-color;
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  color: #fff
}

.right {
  .top {
    span {
      margin-right: 10px;
    }

  }

  .bottom {
    color: #fff;
    margin-top: 10px;
    font-style: 14px;
  }
}

.layout-section {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;

  .aside {
    width: 220px;
    height: 1000px;
    // background-color: blue;
    padding: 20px;

    >div {
      // margin-bottom: 10px;
      border-bottom: 2px solid #ccc;
      padding: 20px;

      a {
        display: block;
        font-weight: 500;
        font-size: 18px;

        &.active {
          color: @theme-color;


        }

        
      }
    }
  }

  .main {
    // width: calc(100% -220px) !important;
    width: calc(100% - 220px);
    height: 1000px;
    background-color: yellow;
    padding: 20px;
  }
  .main > nav {
    height: 60px;
    background-color: #f0f0f0;
    a{
      display: inline-block;
      padding: 10px 15px;
      border:1px solid #ccc;
      position: relative;
      height: 100%;
      line-height: 30px;

      i{
        position: absolute;
        right: 4px;
        top: -5px;
      }
    }
  }

}
li a{
  padding-left: 15px;
}
</style>